<template>
  <div class="login">
    <h1>登录管理，点击框内的文字登录或退出登录</h1>
     <h2 v-if="!isLogin" @click="login">未登录，点击登录</h2>
     <h2 v-else @click="logout">已登录，点击退出登录</h2>
    <button @click="tlogout">5秒后退出</button>
     <fnav></fnav>
  </div>
</template>

<script>
import fnav from '@/components/fnav'
export default {
  name: 'login',
  components:{
    'fnav':fnav
  },
  computed:{
    isLogin:function(){ return  this.$store.state.isLogin}
  },
   methods:{
    login(){
      this.$store.commit('login');
    },
    logout(){
      this.$store.commit('logout');
    },
    tlogout(){
        //  setTimeout(()=>{
        //    this.$store.commit('logout');
        //  },5000)
       this.$store.dispatch('tlogout');

      }

  }
}
</script>
<style>
  .login h2{
    border:1px dashed #aaa;
    padding:20px;
    width:50%;
    margin:20px auto;
  }
</style>

